</html>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="website">
    <div class="header">
      <div class="left">
        <img src="http://127.0.0.1:7001/public/avatar/upload/20220411/1649691716855.png" alt="">
      </div>
      <div class="right">
        <img src="http://127.0.0.1:7001/public/avatar/upload/20220412/1649693643137.png" alt="">
      </div>
    </div>
    <div class="navBar">
      <div class="navBar_wrapper">
        <ul class="menu" id="menu">
        </ul>
      </div>
    </div>
    <div class="carousel">123</div>
    <div class="content">132</div>
    <div class="footer">
      <div class="wrapper">
        <div class="footer_top">
          <div class="donghuan">
            <div class="dd">东环校区</div>
            <p>地址：广西柳州市城中区东环大道268号</p>
            <p>邮编：545006</p>
          </div>
          <div class="liushi">
            <div class="dd">柳石校区</div>
            <p>地址：广西柳州市鱼峰区柳石路257号</p>
            <p>邮编：545005</p>
          </div>
          <div class="liudong">
            <div class="dd">柳东校区</div>
            <p>地址：广西柳州市鱼峰区官塘大道19号</p>
            <p>邮编：545616</p>
          </div>
          <div class="qita">
            <div><span>电话：0772-2685979（校办） 0772-2687698（传真）</span></div>
            <p>本专科招生：0772—2686186 研究生招生：0772—2685375</p>
            <p>继续教育招生：0772—2686688</p>
          </div>
        </div>
        <div class="footer-bottom">
          备案号：
          <img src="http://127.0.0.1:7001/public/avatar/upload/20220412/1649694298823.png" alt="">
          桂ICP备17000546号-1
          <img src="http://127.0.0.1:7001/public/avatar/upload/20220412/1649694333094.png" alt="">
          前置审核编号： 桂JS200601-10
          <span>信息管理： 广西科技大学党委宣传部</span>
        </div>
      </div>
    </div>
  </div>
</body>
<script>
  var data;
  let menuLiArr = []
  let menuLiStr = ''
  window.addEventListener('message', function (messageEvent) {
    console.log(messageEvent.data)
    data = messageEvent.data;
  })
  console.log(data)
  if (data && data.name && data.categories) {
    console.log(data)
    menuLiArr = data.categories
    document.title = data.name
    for (let i = 0; i < data.categories.length; i++) {
      console.log(data.categories[i].name)
      menuLiStr += '<li>' + data.categories[i].name + '</li>'
    }
    document.getElementById('menu').innerHTML = menuLiStr
  }
</script>
<style>
  body,
  html {
    width: 100%;
    height: 100%;
  }

  .website {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    background-image: linear-gradient(to top, #a3bded 0%, #6991c7 100%);
  }

  .header {
    width: 85%;
    margin: 0 auto;
    border-bottom: 1px solid #fff;
    overflow: hidden
  }

  .left {
    float: left;
    margin-top: 1em;
  }

  .right {
    float: right;
    margin-top: 2em;
  }

  .navBar {
    color: white;
  }

  .navBar_wrapper {
    width: 85%;
    margin: 0 auto;
    display: flex;
    justify-content: space-evenly;
  }

  .menu {
    padding: 0;
    list-style: none;
  }

  .menu li {
    float: left;
    line-height: 60px;
    padding: 0 1em;
    font-size: 20px;
    cursor: pointer;
  }

  .footer {
    width: 85%;
    margin: 0 auto;
    border-top: 1px solid rgb(50, 74, 154);
    color: black;
    height: 200px;
  }

  .footer_top {
    display: flex;
    justify-content: space-between;
  }

  .donghuan,
  .liushi,
  .liudong,
  .qita {
    margin-top: 2.5%;
  }

  .footer-bottom {
    display: flex;
    justify-content: center;
    margin-top: 2%;
  }
</style>

</html>